<template>
  <div>
    <div>
      <jxf-titletip :title="title" :hasGoBack="true" @goBack="goPreviewBack" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="detailInfo" ref="detailInfo">
          <el-form-item label="关联-订单号:" prop="orderNo">
            <el-input v-model="detailInfo.orderNo" clearable ref="input-orderNo" @keyup.enter.native="enterNextInput('enterpriseName')"></el-input>
          </el-form-item>
          <el-form-item label="订单类型:" prop="orderType">
            <el-select v-model="detailInfo.orderType" clearable placeholder="全部订单">
              <el-option label="普通订单" value="0"></el-option>
              <!--<el-option label="直通订单" value="1"></el-option>-->
              <el-option label="签约订单" value="1"></el-option>
            </el-select>
          </el-form-item>
          <jxf-Date :startTime.sync="detailInfo.startTime" :endTime.sync="detailInfo.endTime" label="下单时间段："></jxf-Date>
          <el-form-item label="供应商企业名称:" prop="enterpriseName">
            <el-input v-model="detailInfo.enterpriseName" clearable ref="input-enterpriseName" @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('detailInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="accountTable">
          <template slot="orderAmount" slot-scope="merchant">
            <div>
              <div>￥{{merchant.row.orderAmount && merchant.row.orderAmount != 0 ? formatMoney.twoDecimal(merchant.row.orderAmount) : '0.00'}}</div>
            </div>
          </template>
          <template slot="status" slot-scope="merchant">
            <div v-if="merchant.row.status === 0">已完成</div>
            <div v-if="merchant.row.status === 1">待付款</div>
            <div v-if="merchant.row.status === 2">待接单</div>
            <div v-if="merchant.row.status === 3">待发货</div>
            <div v-if="merchant.row.status === 4">待收货</div>
            <div v-if="merchant.row.status === 6">已关闭</div>
            <div v-if="merchant.row.status === 7">已关闭</div>
            <div v-if="merchant.row.status === 8">已关闭</div>
            <div v-if="merchant.row.status === 9">已关闭</div>
            <div v-if="merchant.row.status === 10">已关闭</div>
          </template>
          <template slot="orderType" slot-scope="merchant">
            <div v-if="merchant.row.orderType == '0'">普通订单</div>
            <div v-if="merchant.row.orderType == '1'">签约订单/直通订单</div>
            <!--<div v-if="merchant.row.orderType == '2'">签约订单</div>-->
          </template>
          <template slot="orderTime" slot-scope="merchant">
            <div>{{merchant.row.orderTime ? FormatDate.timeFormat(merchant.row.orderTime) : ""}}</div>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  export default {
    name: "PayableUnpaid",
    props: {
      dataInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        title: "应付未付明细",
        isSuccess: false,
        detailInfo: {
          endTime: "",
          orderNo: "",
          orderType: "",
          startTime: "",
          enterpriseName: ""
        },
        formatMoney: formatMoney,
        FormatDate: FormatDate,
        accountTable: {
          border:true,
          loading:false,
          hasSelect:false,
          hasOperation:false,
          tr: [
            {
              id: '1',
              minWidth: '140',
              label: '采购商企业名称',
              prop: 'merchantName'
            },
            {
              id: '2',
              width: '120',
              label: '采购商主体账号',
              prop: 'telphone'
            },
            {
              id: '3',
              minWidth: '140',
              label: '关联-订单号',
              prop: 'orderNo'
            },
            {
              id: '4',
              minWidth: '140',
              label: '供应商企业名称',
              prop: 'enterpriseName'
            },
            {
              id: '5',
              label: '订单状态',
              prop: 'status',
              show: 'template'
            },
            {
              id: '6',
              label: '订单类型',
              show: 'template',
              prop: 'orderType'
            },
            {
              id: '7',
              label: '下单时间',
              show: 'template',
              width: '160',
              prop: 'orderTime'
            },
            {
              id: '8',
              label: '订单金额',
              show: 'template',
              prop: 'orderAmount'
            },
          ],
          operation: [],
          data: this.dataInfo ? this.dataInfo.dataList : []
        },
        pageTotal:this.dataInfo ? this.dataInfo.total : 0,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      exportExcel(){
        this.isSuccess = true;
        let data = {
          ...this.detailInfo,
          merchantId: this.dataInfo.merchantId ? this.dataInfo.merchantId : ""
        }
        ajax.export(apis.finance.exportMerchantDetail, data).then((res) => {
          this.isSuccess = false;
        }).catch((err) => {
          this.$message.error(err.message)
        })
      },
      onSearch() {
        this.currentPage = 1;
        this.getData()
      },
      getData() {
        this.accountTable.loading = true;
        let data = {
          ...this.detailInfo,
          merchantId: this.dataInfo.merchantId,
          page: this.currentPage,
          pageSize: this.pageSize
        };
        ajax.post(apis.finance.getMerStatisticsDetail, data).then(res => {
          if(res.code === "10000000") {
            this.accountTable.data = res.data.dataList;
            this.pageTotal = res.data.total
          } else {
            this.$message.error(res.message)
          }
          this.accountTable.loading = false;
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      refreshFuc() {
        this.resetForm('detailInfo')
        this.currentPage = 1;
        this.pageSize = 10
        this.getData()
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getData()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getData()
      },
      goPreviewBack() {
        this.$emit('goBack')
      }
    },
    created() {

    }
  }
</script>

<style lang="scss" scoped>

</style>
